<template>
  <div class="system-dict-list">
    <avue-crud
      ref="crudItem"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onCustomSearchReset"
      @row-save="rowSave"
      @row-update="addUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
    >
    </avue-crud>
  </div>
</template>

<script>
import {
  requestSystemDictPage,
  requestSystemDictCreate,
  requestSystemDictUpdate,
  requestSystemDictDelete,
} from '@/api/system/dict'
import ListMixin from '@/utils/mixins/list-mixin'

export default {
  name: 'SystemDictList',
  mixins: [ListMixin],
  props: {
    typeId: { type: String, default: '' },
    dictCode: { type: String, default: '' },
  },
  data() {
    var validateTrim = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('请输入'))
      } else {
        callback()
      }
    }
    return {
      listApi: requestSystemDictPage,
      createApi: requestSystemDictCreate,
      updateApi: requestSystemDictUpdate,
      deleteApi: requestSystemDictDelete,
      listMapFunc: (item) => ({
        ...item,
        $cellEdit: false,
      }),
      editMapFunc: (item) => ({
        ...item,
        dictTypeId: this.typeId,
        dictTypeCode: this.dictCode,
      }),
      tableOption: {
        menuWidth: 220,
        addTitle: '新增',
        editTitle: '编辑',
        viewTitle: '查看',
        columnBtn: false,
        selection: false,
        addBtn: false,
        viewBtn: false,
        addRowBtn: true,
        cellBtn: true,
        column: [
          {
            label: '名称',
            prop: 'dictValue',
            type: 'input',
            minlength: 0,
            maxlength: 50,
            showWordLimit: true,
            align: 'left',
            span: 24,
            rules: [
              { required: true, message: '请输入名称' },
              { validator: validateTrim, trigger: 'blur' },
            ],
            cell: true,
          },
          {
            label: '编码',
            prop: 'dictCode',
            type: 'input',
            minlength: 0,
            maxlength: 50,
            showWordLimit: true,
            align: 'left',
            span: 24,
            rules: [
              { required: true, message: '请输入编码' },
              { validator: validateTrim, trigger: 'blur' },
            ],
            cell: true,
          },
          {
            label: '备注',
            prop: 'description',
            type: 'input',
            minlength: 0,
            maxlength: 255,
            showWordLimit: true,
            align: 'left',
            span: 24,
            rules: [{ max: 255, message: '最多255个字' }],
            cell: true,
          },
        ],
      },
    }
  },
  watch: {
    typeId(v) {
      this.init()
      this.onRefresh()
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.searchForm.dictTypeId = this.typeId
    },
    onCustomSearchReset() {
      this.searchForm.dictTypeId = this.typeId
      this.onSearchReset()
    },
    rowSave(row, done, loading) {
      this.form = row
      this.onRowSave(row, done, loading)
    },
    addUpdate(row, index, done, loading) {
      this.form = row
      this.onRowUpdate(row, index, done, loading)
    },
  },
}
</script>

<style lang="scss">
.system-dict-list {
  .avue-crud__empty {
    padding: 16px 0;
  }
}
</style>
